import { defineComponent, h, ref, onUnmounted, onMounted } from '@vue/runtime-core'
import { game } from '../Game'
import map from '../../assets/map.jpg'

export default defineComponent({
    setup(){
        const viewHeight = 1080
        //需要改变y
        const y1 = ref(0)
        const y2 = ref(-viewHeight)
        const speed = 1
        //定时器，跳转页面后需要关闭，已验证
        const bgcMove = ()=>{
            //console.log('背景一直动')
            y1.value += speed
            y2.value += speed
            if(y1.value >= viewHeight){
                y1.value = -viewHeight
            }
            if(y2.value >= viewHeight){
                y2.value = -viewHeight
            }

        }
        onMounted(() => {
            game.ticker.add(bgcMove)
        })
        onUnmounted(() => {
            game.ticker.remove(bgcMove)
        })
        
        return { 
            y1,
            y2 
        }
    },
    render(ctx){
        return h('Container',[
            h('Sprite',{
                texture:map,
                y:ctx.y1
            }),                
            h('Sprite',{
                texture:map,
                y:ctx.y2
            })])
    }
})